<template>
	<view class="content">
		<view class="top">
			<view hover-class="publish" class="pub" @click="publish">
				<uni-icons type="camera-filled" size="40"></uni-icons>
			</view>
			<view class="headimgurl">
				<text class="nickname">{{nickname}}</text>
				<view class="img">
					<image :src="headimgurl" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 社区 -->
		<scroll-view @scroll="scroll" style="height:calc(100vh-280px)" scroll-y class="comments">
			<community-com v-for="item in commentsData" :key="item.commentid" @handlike="handlike" @reply="handleReply"
				@start-write-comment="handleWrite" :avatar="item.headimgurl" :name="item.nickname"
				:publish-time="item.create_at" :content="item.content" :imgList="item.imgList" :reply="item.reply"
				:currentItem="item" :likes="item.likes" :likeNumber="item.likes?item.likes.length:0">
			</community-com>
		</scroll-view>
		<view class="comment-box" v-show="showCommentBox">
			<view class="container">
				<input cursor-spacing="25" type="text" :focus="focus" @blur="handleBlur" :adjust-position="true"
					@confirm="confirm" confirm-type="send" v-model="commentValue" placeholder="发表你的观点..." />
				<!-- <button type="primary" @click="submit">提交</button> -->
			</view>
		</view>
	</view>
</template>
<script setup>
	import { nextTick, ref } from "vue"

	import communityCom from "@/components/community.vue"

	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app"

	import { storeToRefs } from "pinia"

	import * as api from "@/api/comment.js"

	import useUser from "@/store/users.js"
	import { onReachBottom } from "@dcloudio/uni-app"

	let scroll = (e) => {
		console.log(e)
	}

	let unid = ref("")
	let headimgurl = ref("")
	let nickname = ref("")
	// let {userInfo headimgurl, nickname, unid } = storeToRefs(userStore);
	// console.log(headimgurl, nickname, unid)


	onShow(() => {
		getComment()
	})
	//点赞
	let handlike = async (commentid) => {
		// console.log(commentid)
		// console.log('333')
		let userStore = useUser();
		try {
			let res = await api.handLikeApi({
				unid: userStore.userInfo.unid,
				commentid
			})
			// console.log(res)
			//更新列表 局部更新
			let commentResult = await api.getCommentsApi({ commentid });
			let currentComment = commentResult.data.find(item => item.commentid == commentid)
			// console.log(currentComment)
			commentsData.value.forEach(item => {
				if (item.commentid == currentComment.commentid) {
					// console.log(currentComment)
					Object.keys(item).forEach(key => {
						item[key] = currentComment[key]
					})
					// console.log(item)
				}
			})
		} catch (e) {
			console.log(e)
		}
	}


	//发布朋友圈,只需要让键盘弹出

	let publish = () => {
		// console.log(123)
		uni.navigateTo({
			url: "/pages/publish/publish"
		})
		// console.log(userStore.userInfo)
		//弹出键盘
		// handleWrite()
	}


	//声明响应式变量,用于展示发布的品评论

	let commentsData = ref([])
	let page = 1;
	//上拉
	onReachBottom(async () => {
		// console.log('22222')
		page++
		try {
			await getComment({ page });
			//停止下拉动作
			uni.stopPullDownRefresh()
		} catch (e) {
			// uni.showToast

		}
	})
	//下拉

	onPullDownRefresh(async () => {
		try {
			await getComment();
			//停止下拉动作
			uni.stopPullDownRefresh()
		} catch (e) {
			// uni.showToast
			uni.stopPullDownRefresh()
		}
	})

	//获取评论的方法

	let getComment = async (param = {}) => {
		uni.showLoading({
			title: '正在加载'
		})

		try {
			let res = await api.getCommentsApi(param)
			// console.log(res)
			commentsData.value = [...commentsData.value, ...res.data];
			uni.hideLoading()
			//放在这用户体验提升
			let userStore = useUser();
			nickname.value = userStore.userInfo.nickname
			headimgurl.value = userStore.userInfo.headimgurl
			unid.value = userStore.userInfo.unid
			return Promise.resolve(res.data)
		} catch (e) {
			// console.log(e.toString())
			uni.hideLoading()
			return Promise.reject(e)
		}
	}




	//评论的内容
	let commentValue = ref("")

	//获取焦点

	let focus = ref(false)

	let showCommentBox = ref(false)

	//当前评论的id

	let currentCommentid = ""
	//评论的发布者
	let target_unid = ""
	//点击了评论
	//如果有isReply标识 就代表现在在回复别人
	let handleWrite = (currentComment, isReply = false) => {
		// console.log('startWrite')
		currentCommentid = isReply ? currentComment.topicId : currentComment.commentid;
		target_unid = currentComment.unid;
		//显示评论框
		showCommentBox.value = true;

		setTimeout(() => {
			focus.value = true;
		}, 200)

		//让元素获取焦点
	}

	//失去焦点

	let handleBlur = () => {
		showCommentBox.value = false;
		focus.value = false;
	}

	//声明一个发送评论的方法

	let addComment = async (params) => {
		uni.showLoading({
			title: "正在发布"
		})
		try {
			let res = await api.addCommmentApi(params)
			uni.hideLoading()
			// getComment()
			let commentid = currentCommentid;
			console.log(commentid)
			let commentResult = await api.getCommentsApi({ commentid });
			let currentComment = commentResult.data.find(item => item.commentid == commentid)
			// console.log(currentComment)
			//局部更新
			commentsData.value.forEach(item => {
				if (item.commentid == currentComment.commentid) {
					// console.log(currentComment)
					Object.keys(item).forEach(key => {
						item[key] = currentComment[key]
					})
					// console.log(item)
				}
			})
			//重置数据
			target_unid = ""
			currentCommentid = ""
			commentValue.value = ""
		} catch (e) {
			console.log(e)
			uni.hideLoading()
		}
	}

	//回复评论
	let handleReply = (currentComment) => {
		//调用编写评论的方法
		handleWrite(currentComment, true)
	}

	//完成输入
	let confirm = () => {
		let userStore = useUser()
		let reply_unid = userStore.userInfo.unid;
		// console.log(userStore.userInfo)
		// console.log('done')
		// console.log(userStore.userInfo)
		// console.log(userStore.userInfo.unid)
		showCommentBox.value = false;
		focus.value = false
		//清空输入框
		// console.log(commentValue.value)
		//发起请求,将数据发送到服务器
		let params = {
			reply_unid,
			content: commentValue.value,
			commentid: currentCommentid,
			//谁发布的评论
			target_unid
		}
		// console.log(params)
		addComment(params)


	}
</script>
<style scoped lang="scss">
	.top {
		height: 250px;
		background-color: #ccc;
		position: relative;
		margin-bottom: 30px;

		.publish {
			background-color: #535353;

		}

		.pub {
			width: 80rpx;

			position: absolute;
			right: 3%
		}

		.headimgurl {
			width: 750rpx;
			height: 100px;
			position: absolute;
			right: 3%;
			bottom: -10%;
			// border: 1px solid red;
			display: flex;
			text-align: right;
			justify-content: space-between;

			.img,
			image {
				background-color: #fff;
				width: 200rpx;
				height: 100px;

			}

			.nickname {
				height: 30px;
				top: 20%;
				font-weight: bold;
				font-size: 24px;
				float: right;
				color: #fff;
				text-align: right;
				padding-right: 20rpx;
				background: none;
				margin-top: 20px;
				flex: 1;
				// color:#576b95;
				// position: absolute;
				// right: 30px;
			}
		}
	}


	.comments {
		width: 750rpx;
		box-sizing: border-box;
		padding: 0 60rpx 0 60rpx;
	}

	.comment-box {
		width: 750rpx;
		height: 45px;
		border: 1px solid #ccc;
		background-color: #bbb;
		position: fixed;
		bottom: var(--window-bottom);
		background: #fff;

		.container {
			justify-content: space-between;
			display: flex;
			align-items: center;

			input {
				flex: 1
			}

			// button {
			// 	flex: 2
			// }
		}

	}
</style>